Skip to main content

4. Git Page

什么是 GitHub Pages？​

GitHub Pages 是 GitHub 提供的静态网站托管服务，允许用户直接从 GitHub 仓库中发布网站。

info

GitHub Pages 适用于个人博客、项目文档、静态网站等场景。

GitHub Pages 的应用场景​

场景说明
个人博客通过 Jekyll 或 Hexo 部署个人博客
项目文档使用 Docusaurus、MkDocs 托管项目文档
静态网站直接托管 HTML/CSS/JS 静态网站
团队协作使用不同分支管理多个版本的站点

启用 GitHub Pages​

1. 在 GitHub 上启用 Pages​

  1. 进入 GitHub 仓库
  2. 打开 Settings > Pages
  3. 选择 main 分支 或 gh-pages 作为站点来源
  4. 站点地址通常为 https://username.github.io/repository-name

2. 通过命令行创建 GitHub Pages 分支​

# 创建 gh-pages 分支
 git checkout --orphan gh-pages

# 提交初始内容
 echo "Hello GitHub Pages" > index.html
 git add index.html
 git commit -m "Initial commit for GitHub Pages"
 git push origin gh-pages

GitHub Pages 部署示例​

<!DOCTYPE html>
<html>
  <head>
    <title>My GitHub Page</title>
  </head>
  <body>
    <h1>Welcome to GitHub Pages!</h1>
  </body>
</html>

GitHub Pages 与分支管理​

GitHub Pages 支持从多个分支部署，常见的管理方式包括：

  • main 分支：存储源代码
  • gh-pages 分支：存储部署的静态文件
  • docs 文件夹：用于 Docusaurus 或 MkDocs

通过 Actions 自动部署 GitHub Pages​

GitHub Actions 自动部署示例
name: Deploy GitHub Pages
on:
  push:
    branches:
      - main
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: 18

      - name: Install dependencies
        run: npm install

      - name: Build site
        run: npm run build

      - name: Deploy to GitHub Pages
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

GitHub Pages 站点回滚​

# 查看历史提交
 git log --oneline

# 回滚到上一个提交
 git reset --hard HEAD~1

# 强制推送到远程
 git push origin gh-pages --force

结论​

GitHub Pages 提供了方便的静态网站托管功能，结合 GitHub Actions 可以实现自动化部署，是个人和团队项目的优秀选择。

更多 GitHub Pages 资源